<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>WebGL2 - Power graph</title>
<link type="text/css" href="../../resources/webgl-tutorials.css" rel="stylesheet" />
<style>
@media (prefers-color-scheme: dark) {
  canvas {
    background: #444;
  }
}
</style>
</head>
<body>
<div class="description">
</div>
<div style="position:absolute;">
  <canvas id="canvas" width="300" height="300" style="width: 300px; height: 300px;"></canvas>
</div>
<div id="uiContainer">
  <div id="ui">
    <div id="power"></div>
  </div>
</div>
</body>
</html>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webgl2fundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="../../resources/webgl-lessons-ui.js"></script>
<script src="../../resources/webgl-utils.js"></script>
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
<script src="../../resources/m3.js"></script>
<script src="diagram.js"></script>
<script>
"use strict";

function main() {
  var ctx = document.querySelector("#canvas").getContext("2d");
  var power = 1;

  webglLessonsUI.setupSlider("#power", {value: power, step: 0.01, precision: 2, slide: updatePower, min: 0, max: 10 });

  function updatePower(event, ui) {
    power = ui.value;
    render();
  }

  const darkColors = {
    base: '#DDD',
    graphFill: '#844',
    axis: '#888',
  };
  const lightColors = {
    base: '#000',
    graphFill: '#fCC',
    axis: '#000',
  };

  const darkMatcher = window.matchMedia("(prefers-color-scheme: dark)");
  darkMatcher.addEventListener('change', render);

  function render() {
    const isDarkMode = darkMatcher.matches;
    const colors = isDarkMode ? darkColors : lightColors;
    webglUtils.resizeCanvasToDisplaySize(ctx.canvas, window.devicePixelRatio);
    var width  = 300;
    var height = 300;

    var baseScale = Math.min(ctx.canvas.width / width,  ctx.canvas.height / height);

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.save();
    ctx.scale(baseScale, baseScale);
    ctx.translate(50, 250);

    ctx.font = "12px sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    function addPowerTop() {
      ctx.beginPath();
      ctx.moveTo(0, 0);
      var numPoints = 50;
      for (var ii = 0; ii <= numPoints; ++ii) {
        var x = ii / numPoints;
        var y = Math.pow(x, power);
        ctx.lineTo(x * 200, y * -200);
      }
    }

    addPowerTop();
    ctx.lineTo(200, 0);
    ctx.lineTo(0, 0);
    ctx.closePath();
    ctx.fillStyle = colors.graphFill;
    ctx.fill();

    ctx.strokeStyle = colors.axis;
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(-1000, 0);
    ctx.lineTo(1000, 0);
    ctx.moveTo(0, -1000);
    ctx.lineTo(0, 1000);
    ctx.stroke();

    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(-1000, -200);
    ctx.lineTo( 1000, -200);
    ctx.moveTo(200, -1000);
    ctx.lineTo(200,  1000);
    ctx.stroke();

    ctx.fillStyle = colors.base;
    ctx.fillText("0,0", -15, 10);
    ctx.fillText("1,1", 215, -190);

    ctx.font = "18px sans-serif";
    ctx.fillText("y = pow(x, " + power.toFixed(2) + ")", 100, 20);


    addPowerTop();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "red";
    ctx.stroke();

    ctx.restore();
  }
  render();
}

main();
</script>

